
import React from "react";
const ThemeContext = React.createContext();
// Provider是提供数据  组件
// Consumer是消费数据  组件
const { Provider, Consumer } = ThemeContext;

// function Child(props) {
//   return (
//     <div>
//       <h3>子组件</h3>
//     </div>
//   )
// }

class Child extends React.Component {
  render() {
    console.log(this.context);
    return (
      <Consumer>
        {
          (ctx) => {
            console.log(ctx)
            return (
              <div>
                <h3>子组件 --- {ctx}</h3>
              </div>
            )
          }
        }
      </Consumer>

    )
  }
}

// 使用上下文件方式一
// Child.contextType = ThemeContext;


function Parent(props) {
  return (
    <div>
      <h3>父组件</h3>
      <Child></Child>
    </div>
  )
}


function DemoA() {
  return (
    <Provider value={"110"}>
      <div>
        <h2>页面</h2>
        <Parent></Parent>
      </div>
    </Provider>
  )
}


export default DemoA;